import {DefineComponent, defineComponent} from "vue";
import {NFormItem, NInput, NGi, NSelect, NDatePicker,} from "naive-ui";
import type {SelectOption} from "naive-ui"

type MySize =  'small' | 'medium' | 'large' | undefined;
type Mypassword = "textarea" | "text" | "password" | undefined;

interface flexformitem {
    slot?: string,
    span: string,  //  宽度
    label: string, // 标题
    key: string, // 关键字
    default: string, // 默认值
    type: string, // 表单类型
    placeholder?: string,// 提示文字
    inputtype?: string, // input输入框的类型
    clearable?: boolean, // 清楚按钮
    disabled?: boolean,// 不可编辑
    size: MySize, // 大小
    change?: null | Function,  // 改变的回调
    options?: SelectOption[] | undefined, // 备选项
    required: string, // 是否必填
    maxlength?: string, // 最大长度
    multiple?: boolean,  // 是否多选
    tooltip?: string, // 滑块覆盖的提示
    placement?: string, // 提示的弹出位置
    max?: string, // 最大值
    min?: string, // 最小值
    datatype?: string, // 时间选择器的类型
    round?: string,  // 是否是圆形
    valueField?: string,   // 关键字
    labelField?: string, // 关键字
    childrenField?: string,  // 关键字
    filterable?: boolean,  // 过滤功能
    rules?: Array<any> | undefined,  // 校验规则
    path: string | undefined,   // 所在路径
    password: Mypassword,    // 是不是密码
    prefix: Function | undefined,
    suffix: Function | undefined,
}

type MyFunction = (e: KeyboardEvent) => {}

export default defineComponent({
    name: "mypicker",
    setup() {
        return (item: flexformitem, shuaxin: Function, meiyongfunc: MyFunction, formValue: { [key: string]: any }) => (
            <NGi span={item.span || 24}>
                <NFormItem label={item.label + "："} path={item.path || item.key} rule={item.rules || []}>
                    <NDatePicker v-model={[formValue[item.key], "value"]} onUpdateValue={(val) => shuaxin(item.key, val)} placeholder={item.placeholder || "请选择"}
                                 clearable={item.clearable} disabled={item.disabled} size={item.size || "small"}>
                    </NDatePicker>
                </NFormItem>
            </NGi>)
    },
})
